<template>
  <div class="count-expose">
    <h3>计数器组件</h3>
    <p>当前计数: {{ count }}</p>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const count = ref(0)
const increment = () => {
  count.value++
}
const decrement = () => {
  count.value--
}

const reset = () => {
  count.value = 0
}

const getCount = () => {
  return count.value
}

defineExpose({
  count, // 也可以暴露响应式数据
  increment,
  decrement,
  reset,
  getCount,
})
</script>

<style scoped lang="scss">
.count-expose {
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  text-align: center;

  button {
    margin: 0 0.5rem;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    background: #007bff;
    color: white;
    cursor: pointer;
  }

  button:hover {
    background: #0056b3;
  }
}
</style>
